<template>
  <a-modal
    :visible="true"
    switchFullscreen
    :width="960"
    class="prewiewModal"
    :footer="null"
    :closable="false"
    :keyboard="false"
    :maskClosable="false">
    <div class="container" @click="test" :style="{ backgroundColor: background}">
      <a-row :gutter="24">
        <a-col :span="12" style="padding-top: 40px;padding-left: 40px;">
          <div id="qrcode" ref="qrCodeDiv"></div>
        </a-col>
        <a-col :span="12" style="padding-top: 30px;">
          <table :style="{fontSize:fontSize,color:fontColor}" class="prewiew-right-table">
            <thead>
            <tr align="center">
              <th>姓名</th>
              <th>部门</th>
              <th>签到时间</th>
            </tr>
            </thead>
            <tbody>
            <tr align="center">
              <td style="padding:0 20px">{{name}}</td>
              <td style="padding:0 20px">{{depart}}</td>
              <td style="padding:0 20px">{{signTime}}</td>
            </tr>
            </tbody>
          </table>
        </a-col>
      </a-row>
    </div>

  </a-modal>
</template>

<script>

  import QRCode from 'qrcodejs2'
  import { getAction,postAction } from '@/api/manage'
  import store from '@/store/'

  export default {
    name: "EoaMettingPreview",
    data () {
      return {
        text:"1244532246166118401",
        background: "#006699",
        fontSize:"24px",
        fontColor:'#000',
        name:"",
        depart:"",
        signTime:"",
        websockSign: null,
        lockReconnect:false,
      }
    },
    created () {
        this.background=this.$route.query.bgColor;
      //TODO 会议的id
        let fontSize=this.$route.query.fontSize
        let fontColor=this.$route.query.fontColor
        if(fontSize){
          this.fontSize=this.$route.query.fontSize+"px";
        }
        if(fontColor){
          this.fontColor=this.$route.query.fontColor;
        }
    },
    mounted(){
      this.$nextTick (function () {
         this.qrcode();
         this.initWebSocket();
      })
    },
    methods: {
      test(){
        postAction("/eoa/metting/eoaMettingSign/mettingSign", {mettingId:"1244532246166118401",userId:"e9ca23d68d884d4ebb19d07889727dae"}).then((res) => {
          console.log("test===>res",res)
        })
      },
      loadUser(userId){
        var that=this;
        getAction("/eoa/metting/eoaMettingSign/mettingInfo", {id:this.text,userid:userId}).then((res) => {
          console.log("loadUser===>res",res)
          if (res.success){
            that.$nextTick(() => {
              that.name=res.result.username;
              that.depart=res.result.userDepart;
              if(res.result.signTime!=null){
                that.signTime=res.result.signTime.split(" ")[1];
              }
            });
          }
        })
      },
      qrcode () {
        document.getElementById("qrcode").innerHTML = "";
        let qrcode=new QRCode(this.$refs.qrCodeDiv, {
                text: this.text,
                width: 300,
                height: 300,
                colorDark: "#000000", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel: QRCode.CorrectLevel.H//容错率，L/M/H
              })
          console.log(qrcode)
      },
      initWebSocket: function () {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        var userId = store.getters.userInfo.id;
        var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
        //console.log(url);
        this.websockSign = new WebSocket(url);
        this.websockSign.onopen = this.websocketOnopen;
        this.websockSign.onerror = this.websocketOnerror;
        this.websockSign.onmessage = this.websocketOnmessage;
        this.websockSign.onclose = this.websocketOnclose;
      },
      websocketOnopen: function () {
        console.log("WebSocket连接成功");
      },
      websocketOnerror: function (e) {
        console.log("WebSocket连接发生错误",e);
        this.reconnect();
      },
      websocketOnmessage: function (e) {
        var data = eval("(" + e.data + ")"); //解析对象
        if(data.cmd == "sign"){
          //签到通知
          this.loadUser(data.userId);
        }
      },
      websocketOnclose: function (e) {
        console.log("connection closed (" + e.code + ")");
        this.reconnect();
      },
      reconnect() {
        var that = this;
        if(that.lockReconnect) return;
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
          console.info("尝试重连...");
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },
    }
  }
</script>

<style>
  .prewiewModal .container {
    height: 460px !important;
    width:100%;
    padding: 24px;
    text-align: center;
  }
  .prewiewModal .ant-modal-content{
    height: 460px !important;
  }
  .prewiewModal .ant-modal-body{
    padding: 0;
  }
  .prewiew-right-table {
    border-collapse: collapse;
  }
  .prewiew-right-table th, .prewiew-right-table td {
    padding: 24px 30px;
  }
</style>